<template>
	<view class="dialog">
		<view class="mask"></view>
		<view class="layer">
			<view class="inner">
				<view class="close" @click="hanvieweClose">
					<image src="https://wx.2024csnl.com/static/lottery2-close.png" mode="widthFix" alt="">
				</view>
				<view class="tit">
					<image src="https://wx.2024csnl.com/static/lottery2-result__1.png" mode="">
					</image>
				</view>
				<view class="card">
					<view class="bj">
						<image src="https://wx.2024csnl.com/static/lottery2-result__2.png" mode="">
						</image>
						<view class="paper">
							<view class="t3" style="margin-top: 20px;">
								<text>{{giftText}}</text>
							</view>
						</view>
					</view>
					<view class="rt">
						<view class="rt1">
							<image src="https://wx.2024csnl.com/static/lottery2-result__6.png" mode="">
							</image>
						</view>
						<view class="rt2">
							<image src="https://wx.2024csnl.com/static/lottery2-result__5.png" mode="">
							</image>
						</view>
						<view class="rt3">
							<image src="https://wx.2024csnl.com/static/lottery2-result__8.png" mode="">
							</image>
						</view>
						<view class="rt4">
							<image src="https://wx.2024csnl.com/static/lottery2-result__7.png" mode="">
							</image>
						</view>
					</view>
					<view class="ft">
						<image src="https://wx.2024csnl.com/static/lottery2-result__3.png" mode="">
						</image>
					</view>
					<view class="floor">
						<image src="https://wx.2024csnl.com/static/lottery2-result__4.png" mode="">
						</image>
					</view>
					<view class="button" @click="hanvieweClose">
						<button>
							<text>立即收下</text>
						</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		props: {
			giftText: {
				type: String,
				default: "",
			}
		},
		methods: {
			hanvieweClose() {
				this.$emit('close', {})
			}
		}
	}
</script>

<style lang="less" scoped>
	.dialog {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;

		.mask {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 0;
			background: rgba(0, 0, 0, .8);
		}

		.layer {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 1;
			display: flex;
			justify-content: space-evenly;
			flex-direction: column;
		}

		.inner {
			position: relative;
			width: 70vw;
			left: 15vw;
			animation: zoomIn .3s ease;
		}

		.close {
			position: absolute;
			bottom: -60px;
			left: 50%;
			margin: 0 0 0 -25px;
			padding: 10px;
			z-index: 10;
			opacity: 0;
			animation: closeShow .3s ease forwards 2s;

			image {
				display: block;
				width: 30px;
				height: 30px;
			}
		}

		.tit {
			position: relative;
			margin: 0 0 40rpx;
			opacity: 0;
			animation: titleShow .3s ease forwards .1s;

			image {
				display: block;
				width: 70vw;
				height: 9vw;
			}
		}

		.card {
			width: 70vw;
			height: 85vw;
			position: relative;
			animation: fanpai .5s ease;

			.bj {
				position: absolute;
				left: 0;
				right: 0;
				bottom: 2rpx;
				z-index: 0;
				height: 60vw;
				// height: 85vw;
				border-radius: 40px;
				overflow: hidden;
				animation: paperShow .3s ease forwards .4s;

				image {
					display: block;
					width: 70vw;
					height: 85vw;
				}

				.paper {
					position: absolute;
					left: 40rpx;
					right: 40rpx;
					top: 30rpx;
					bottom: 0;
					z-index: 1;
					padding: 60rpx;
					border-radius: 40rpx 40rpx 0 0;
					background: -webkit-linear-gradient(top, #fef7df, #f3cf96);
					text-align: center;

					&:before {
						content: '';
						position: absolute;
						left: 20rpx;
						right: 20rpx;
						top: 20rpx;
						bottom: 20rpx;
						border: 1px solid #fee2b2;
						border-radius: 30rpx;
					}

					.t1 {
						line-height: 50rpx;
						font-size: 40rpx;
						color: #c30800;
						opacity: 0;
						animation: wordShow .5s ease forwards .4s;
					}

					.t2 {
						line-height: 120rpx;
						font-size: 100rpx;
						color: #f36038;
						opacity: 0;
						animation: wordShow .5s ease forwards .5s;

						&:before {
							content: '￥';
							font-size: 60rpx;
							vertical-align: middle;
						}
					}

					.t3 {
						line-height: 40rpx;
						font-size: 32rpx;
						color: #c30800;
						opacity: 0;
						animation: wordShow .5s ease forwards .4s;
					}
				}
			}

			.rt {
				position: relative;
				width: 100%;
				height: 100%;
				pointer-events: none;

				.rt1,
				.rt2,
				.rt3,
				.rt4 {
					position: absolute;
					z-index: 10;
					opacity: 0;
				}

				.rt1 {
					left: -15vw;
					top: -5vw;
					animation: st1Show .5s ease forwards .4s;

					image {
						width: 32vw;
						height: 23vw;
					}
				}

				.rt2 {
					right: -2vw;
					top: -5vw;
					animation: st2Show .5s ease forwards .4s;

					image {
						width: 20vw;
						height: 43vw;
					}
				}

				.rt3 {
					right: -8vw;
					bottom: 8vw;
					animation: st3Show .5s ease forwards .4s;

					image {
						width: 20vw;
						height: 30vw;
					}
				}

				.rt4 {
					left: -5vw;
					bottom: 18vw;
					animation: st4Show .5s ease forwards .4s;

					image {
						width: 18vw;
						height: 18vw;
					}
				}
			}

			.ft {
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				z-index: 5;

				image {
					display: block;
					width: 70vw;
					height: 40vw;
				}
			}

			.floor {
				position: absolute;
				left: 50%;
				bottom: 18vw;
				z-index: 7;
				margin: 0 0 0 -12vw;
				opacity: 0;
				animation: huakai .5s ease forwards .3s;

				image {
					display: block;
					width: 24vw;
					height: 24vw;
				}
			}

			.button {
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				z-index: 6;
				padding: 0 12vw 5vw;
				opacity: 0;
				animation: buttonShow .3s ease forwards 1s;

				button {
					background: #fceaa1;
					color: #c30800;
					border-radius: 60rpx;

					&::after {
						content: none;
					}
				}
			}
		}
	}

	@-webkit-keyframes titleShow {
		0% {
			transform: translateY(-100px);
			opacity: 0;
		}

		100% {
			transform: translateY(0);
			opacity: 1;
		}
	}

	@-webkit-keyframes closeShow {
		0% {
			transform: scale(0.5);
			opacity: 0;
		}

		60% {
			transform: scale(1.1);
			opacity: 1;
		}

		100% {
			transform: scale(1);
			opacity: 1;
		}
	}

	@-webkit-keyframes fanpai {
		0% {
			transform: rotateY(180deg) skewY(0deg) scale(.8);
			transform-origin: center bottom;
		}

		70% {
			transform: rotateY(-40deg) skewY(-10deg) scale(1.2);
		}

		100% {
			transform: rotateY(0deg) skewY(0deg) scale(1);
		}
	}

	@-webkit-keyframes huakai {
		0% {
			transform: scale(0) rotate(30deg);
			opacity: 1;
		}

		50% {
			transform: scale(1) rotate(-10deg);
			opacity: 1;
		}

		100% {
			transform: scale(1) rotate(0);
			opacity: 1;
		}
	}

	@-webkit-keyframes paperShow {
		0% {
			height: 60vw;
		}

		60% {
			height: 90vw;
		}

		100% {
			height: 85vw;
		}
	}

	@-webkit-keyframes wordShow {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	@-webkit-keyframes buttonShow {
		0% {
			transform: scale(.5);
			opacity: 0;
		}

		60% {
			transform: scale(1.2);
			opacity: 1;
		}

		100% {
			transform: scale(1);
			opacity: 1;
		}
	}

	@-webkit-keyframes st1Show {
		0% {
			transform: scale(.5) translate(100px, 100px);
			opacity: 0;
		}

		60% {
			transform: scale(1.1) translate(-10px, -10px);
			opacity: 1;
		}

		100% {
			transform: scale(1) translate(0, 0);
			opacity: 1;
		}
	}

	@-webkit-keyframes st2Show {
		0% {
			transform: scale(.5) translate(-100px, 100px);
			opacity: 0;
		}

		60% {
			transform: scale(1.1) translate(10px, -15px);
			opacity: 1;
		}

		100% {
			transform: scale(1) translate(0, 0);
			opacity: 1;
		}
	}

	@-webkit-keyframes st3Show {
		0% {
			transform: scale(.5) translate(-100px, -100px);
			opacity: 0;
		}

		60% {
			transform: scale(1.1) translate(10px, 20px);
			opacity: 1;
		}

		100% {
			transform: scale(1) translate(0, 0);
			opacity: 1;
		}
	}

	@-webkit-keyframes st4Show {
		0% {
			transform: scale(.5) translate(100px, -100px);
			opacity: 0;
		}

		60% {
			transform: scale(1.1) translate(-10px, 20px);
			opacity: 1;
		}

		100% {
			transform: scale(1) translate(0, 0);
			opacity: 1;
		}
	}
</style>